<template>
  <d-dropdown :position="position" align="start">
    <div class="sa-flex sa-cursor" style="gap: 4px;font-size: 12px">
      <i class="icon icon-mine"/>
      <div class="text">{{ account.name }}</div>
    </div>
    <template #menu>
      <ul class="list-menu">
        <li class="menu-item ">
          <div class="text">个人中心</div>
        </li>
        <li class="menu-item">
          <div class="text">退出登录</div>
        </li>

      </ul>
    </template>
  </d-dropdown>

</template>

<script lang="ts" setup>
import {ref} from 'vue';

const account = ref({
  name: '芋圆奶茶',

})
</script>

<style lang="scss" scoped>
.list-menu {
  padding: 0;
  margin: 0;
  width: 100px;
}

.menu-item {
  margin: 6px 0px 0px 0px;
  padding: 4px;
  font-size: 14px;
  gap: 4px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f5fc);
  color: var(--devui-list-item-hover-text, #526ecc);
}
</style>
